<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../util.js"></script>
    <style>
        * {margin:0; padding:0; list-style:none;}
        #div1 {width:850px; height:500px; margin:50px auto; overflow:hidden; position:relative;}
        #div1 ul {position:absolute;left: 0;top: 0;}
        #div1 ul li{height:500px;float: left;}
        #div1 ol {position:absolute;right: 10%;bottom: 10px;z-index:6}
        #div1 ol li{width: 20px;height: 20px;background: #fff;margin-left: 5px;float: left;line-height: 20px;text-align: center;}
        #div1 ol li.ac{background: red;color: #fff;}
        #div1>a{text-decoration: none;position: absolute;top: 50%;margin-top: -10px;height: 40px;line-height: 32px;text-align: center;width: 40px;font-size: 40px;vertical-align: middle;color: #fff;background: rgba(0,0,0,0.5);z-index:6;}
        #goPrev{left: 0;}
        #goNext{right: 0;}
        img{width:850px; height:500px;}
    </style>
</head>
<body>
    <div id="div1">
        <ul>
        <li><img src="img/1.jpg" /></li>
        <li><img src="img/2.jpg" /></li>
        <li><img src="img/3.jpg" /></li>
        <li><img src="img/4.jpg" /></li>
        <li><img src="img/5.jpg" /></li>
      </ul>
      <ol>
    
      </ol>
      <a href="javascript:;" id="goPrev">&laquo;</a>
      <a href="javascript:;" id="goNext">&raquo;</a>
    </div>
    <script>
        window.onload = function(){
            class Shuffling {
                constructor(selector){
                    this.box = document.querySelector(selector)
                    this.imgs = this.box.querySelectorAll('ul li')
                    this.ul = this.box.querySelector('ul')
                    this.ol = this.box.querySelector('ol')
                    this.goPrev = this.box.querySelector('#goPrev')
                    this.goNext = this.box.querySelector('#goNext')
                    this.len = this.imgs.length
                    this.list = []
                    this.width = this.imgs[0].offsetWidth
                    this.lastindex = 0
                    this.index = 0
                    this.ul.appendChild(this.imgs[0].cloneNode(true))
                    this.ul.style.width = (this.len+1) * this.width +'px'
                    this.ismove = false
                    this.createLi()
                    this.bindEvent()
                }
                bindEvent(){
                    this.list.forEach( (ele,i) =>{
                        ele.onclick = () =>{
                            if(!this.ismove){
                                this.ismove = true
                                this.lastindex = this.index
                                this.index = i
                                utils.bfmove(this.ul,'left',-this.index * this.width,() =>{
                                    this.ismove = false
                                })
                                this.remove(this.lastindex,this.index)
                            }
                        }
                    })
                    this.goNext.onclick = () =>{
                        if(!this.ismove){
                            this.ismove = true
                            this.lastindex = this.index
                            this.index++
                            if(this.index > this.len-1){
                                this.index = 0 
                                utils.bfmove(this.ul,'left',-this.len * this.width,() =>{
                                    this.ul.style.left = 0
                                    this.ismove = false
                                })
                            }else{
                                utils.bfmove(this.ul,'left',-this.index * this.width,() =>{
                                    this.ismove = false
                                })
                            }
                            this.remove(this.lastindex,this.index)
                        }
                    }
                    this.goPrev.onclick = () =>{
                        if(!this.ismove){
                            this.ismove = true
                            this.lastindex = this.index
                            this.index--
                            if(this.index < 0){
                                this.index = this.len - 1
                                this.ul.style.left = - this.len * this.width + 'px'
                            }
                            this.remove(this.lastindex,this.index)
                            utils.bfmove(this.ul,'left',-this.index * this.width,() =>{
                                this.ismove = false
                            })
                        }
                    }
                    this.auto()
                    this.box.onmouseenter = () =>{
                        clearInterval(this.box.timer)
                    }
                    this.box.onmouseleave = () =>{
                        this.auto()
                    }
                }
                createLi () {
                    for(var i=0;i<this.len;i++){
                        var li = document.createElement('li')
                        li.innerHTML = i+1
                        this.list.push(li)
                        this.ol.appendChild(li)
                    }
                    this.list[0].className = 'ac'
                }
                remove(lastindex,index){
                    this.list[lastindex].classList.remove('ac')
                    this.list[index].classList.add('ac')
                }
                auto () {
                    this.box.timer = setInterval(() => {
                        this.goNext.onclick()
                    }, 1500);
                }
            }
            
            new Shuffling('#div1')
        }
    </script>
</body>
</html>